<template>
  <view class="query-box">
    <tm-sheet style="border-radius: 2px">
      <tm-text :font-size="24" _class="text-weight-b" label="请输入你要查询的ip"></tm-text>
      <tm-divider></tm-divider>

      <tm-input :searchWidth="120" @search="search" prefix="tmicon-search"
                searchLabel="搜索"></tm-input>
    </tm-sheet>

    <tm-sheet style="border-radius: 2px">
      <tm-text :font-size="24" _class="text-weight-b" label="详细信息"></tm-text>
      <tm-divider></tm-divider>

      <tm-descriptions :label-width="100" :width="686" :column="1" transprent :round="1" text title="">
        <tm-descriptions-item :font-size="24" color="red" label="IP地址" :value="content"/>
        <tm-descriptions-item :font-size="24" color="red" label="国家" :value="country"/>
        <tm-descriptions-item :font-size="24" color="red" label="省份" :value="province"/>
        <tm-descriptions-item :font-size="24" color="red" label="城市" :value="city"/>
        <tm-descriptions-item :font-size="24" color="red" label="运营商" :value="isp"/>
      </tm-descriptions>
    </tm-sheet>
  </view>
  <view>

  </view>
</template>

<script>
import {ipQuery} from "@/api/roll";

export default {
  data() {
    return {
      content: '',
      country: '',
      province: '',
      city: '',
      isp: ''
    }
  },
  onLoad() {
    this.search()
  },
  methods: {
    search(e) {
      ipQuery({ip: e}).then(res => {
        this.country = res.data.country
        this.province = res.data.province
        this.city = res.data.city
        this.isp = res.data.isp
      }).finally(() => {
        this.content = e
      })
    }
  }
}
</script>

<style scoped>

</style>
<style lang="scss">
page {
  background-color: #F7F7F7 !important;
}
</style>
